<template>
  <div>
    <div v-if="!navs.length" class="p-5 text-center text-muted border rounded bg-light">
      暂无权限
    </div>
    <div class="row" v-else>
      <div class="col-4 mb-3" v-for="nav in navs" :key="nav.title">
        <router-link :to="nav.route">
          <div class="card nav-wrap">
            <div class="nav-icon">
              <i :class="nav.icon"></i>
            </div>
            <div class="nav-content">
              <h3 class="nav-title">{{ nav.title }}</h3>
              <div class="nav-desc">{{ nav.desc }}</div>
            </div>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  components: {},
  props: {},
  data() {
    return {}
  },
  computed: {
    ...mapGetters(['provinceMainBusiness', 'user']),
    scopeArr() {
      return this.user.scopeArr
    },
    navs() {
      const data = []
      this.provinceMainBusiness.forEach(item => {
        if (this.scopeArr.includes(item.code)) {
          data.push({
            title: item.value,
            desc: '业务简介',
            icon: 'fa fa-tree',
            route: {
              name: 'import_class',
              query: {
                i: item.code,
              },
            },
          })
        }
      })
      return data
    },
  },
  watch: {},
  created() {
    this.getData()
  },
  mounted() {},
  methods: {
    getData() {
      this.$store.dispatch('getProvinceMainBusiness')
    },
  },
}
</script>

<style lang="scss" scoped>
.nav-wrap {
  padding: 3rem 1rem;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
  color: $body-color;

  &:hover {
    color: $primary;
    color: var(--primary);
  }
}
.nav-icon {
  font-size: 2rem;
  flex: 1;
  text-align: center;
  color: $gray-600;
}
.nav-content {
  flex: 2;
}
.nav-title {
  margin-bottom: 1rem;
  font-size: 1.25rem;
  font-weight: bold;
}
.nav-desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
